"use strict";

exports.__esModule = true;
exports.default = void 0;

var _utils = require("../utils");

var _touch = require("../mixins/touch");

var _relation = require("../mixins/relation");

var _bindEvent = require("../mixins/bind-event");

var _constant = require("../utils/constant");

var _event = require("../utils/dom/event");

var _style = require("../utils/dom/style");

var _scroll = require("../utils/dom/scroll");

var _createNamespace = (0, _utils.createNamespace)('index-bar'),
    createComponent = _createNamespace[0],
    bem = _createNamespace[1];

var _default2 = createComponent({
    mixins: [_touch.TouchMixin, (0, _relation.ParentMixin)('vanIndexBar'), (0, _bindEvent.BindEventMixin)(function (bind) {
        if (!this.scroller) {
            this.scroller = (0, _scroll.getScroller)(this.$el);
        }

        bind(this.scroller, 'scroll', this.onScroll);
    })],
    props: {
        sticky: {
            type: Boolean,
            default: true
        },
        zIndex: {
            type: Number,
            default: 1
        },
        highlightColor: {
            type: String,
            default: _constant.GREEN
        },
        stickyOffsetTop: {
            type: Number,
            default: 0
        },
        indexList: {
            type: Array,
            default: function _default() {
                var indexList = [];
                var charCodeOfA = 'A'.charCodeAt(0);

                for (var i = 0; i < 26; i++) {
                    indexList.push(String.fromCharCode(charCodeOfA + i));
                }

                return indexList;
            }
        }
    },
    data: function data() {
        return {
            activeAnchorIndex: null
        };
    },
    computed: {
        highlightStyle: function highlightStyle() {
            var highlightColor = this.highlightColor;

            if (highlightColor) {
                /* istanbul ignore else */
                return {
                    color: highlightColor
                };
            }
        }
    },
    watch: {
        indexList: function indexList() {
            this.$nextTick(this.onScroll);
        }
    },
    methods: {
        onScroll: function onScroll() {
            var _this = this;

            if ((0, _style.isHidden)(this.$el)) {
                return;
            }

            var scrollTop = (0, _scroll.getScrollTop)(this.scroller);
            var scrollerRect = this.getScrollerRect();
            var rects = this.children.map(function (item) {
                return {
                    height: item.height,
                    top: _this.getElementTop(item.$el, scrollerRect)
                };
            });
            var active = this.getActiveAnchorIndex(scrollTop, rects);
            this.activeAnchorIndex = this.indexList[active];

            if (this.sticky) {
                this.children.forEach(function (item, index) {
                    if (index === active || index === active - 1) {
                        var rect = item.$el.getBoundingClientRect();
                        item.left = rect.left;
                        item.width = rect.width;
                    } else {
                        item.left = null;
                        item.width = null;
                    }

                    if (index === active) {
                        item.active = true;
                        item.top = Math.max(_this.stickyOffsetTop, rects[index].top - scrollTop) + scrollerRect.top;
                    } else if (index === active - 1) {
                        var activeItemTop = rects[active].top - scrollTop;
                        item.active = activeItemTop > 0;
                        item.top = activeItemTop + scrollerRect.top - item.height;
                    } else {
                        item.active = false;
                    }
                });
            }
        },
        getScrollerRect: function getScrollerRect() {
            var scroller = this.scroller;
            var scrollerRect = {
                top: 0,
                left: 0
            };

            if (scroller.getBoundingClientRect) {
                scrollerRect = scroller.getBoundingClientRect();
            }

            return scrollerRect;
        },
        getElementTop: function getElementTop(ele, scrollerRect) {
            var scroller = this.scroller;

            if (scroller === window || scroller === document.body) {
                return (0, _scroll.getElementTop)(ele);
            }

            var eleRect = ele.getBoundingClientRect();
            return eleRect.top - scrollerRect.top + (0, _scroll.getScrollTop)(scroller);
        },
        getActiveAnchorIndex: function getActiveAnchorIndex(scrollTop, rects) {
            for (var i = this.children.length - 1; i >= 0; i--) {
                var prevHeight = i > 0 ? rects[i - 1].height : 0;
                var reachTop = this.sticky ? prevHeight + this.stickyOffsetTop : 0;

                if (scrollTop + reachTop >= rects[i].top) {
                    return i;
                }
            }

            return -1;
        },
        onClick: function onClick(event) {
            this.scrollToElement(event.target);
        },
        onTouchMove: function onTouchMove(event) {
            this.touchMove(event);

            if (this.direction === 'vertical') {
                (0, _event.preventDefault)(event);
                var _event$touches$ = event.touches[0],
                    clientX = _event$touches$.clientX,
                    clientY = _event$touches$.clientY;
                var target = document.elementFromPoint(clientX, clientY);

                if (target) {
                    var index = target.dataset.index;
                    /* istanbul ignore else */

                    if (this.touchActiveIndex !== index) {
                        this.touchActiveIndex = index;
                        this.scrollToElement(target);
                    }
                }
            }
        },
        scrollToElement: function scrollToElement(element) {
            var index = element.dataset.index;

            if (!index) {
                return;
            }

            var match = this.children.filter(function (item) {
                return String(item.index) === index;
            });

            if (match[0]) {
                match[0].scrollIntoView();

                if (this.sticky && this.stickyOffsetTop) {
                    (0, _scroll.setRootScrollTop)((0, _scroll.getRootScrollTop)() - this.stickyOffsetTop);
                }

                this.$emit('select', match[0].index);
            }
        },
        onTouchEnd: function onTouchEnd() {
            this.active = null;
        }
    },
    render: function render() {
        var _this2 = this;

        var h = arguments[0];
        var Indexes = this.indexList.map(function (index) {
            var active = index === _this2.activeAnchorIndex;
            return h("span", {
                "class": bem('index', {
                    active: active
                }),
                "style": active ? _this2.highlightStyle : null,
                "attrs": {
                    "data-index": index
                }
            }, [index]);
        });
        return h("div", {
            "class": bem()
        }, [h("div", {
            "class": bem('sidebar'),
            "style": {
                zIndex: this.zIndex + 1
            },
            "on": {
                "click": this.onClick,
                "touchstart": this.touchStart,
                "touchmove": this.onTouchMove,
                "touchend": this.onTouchEnd,
                "touchcancel": this.onTouchEnd
            }
        }, [Indexes]), this.slots('default')]);
    }
});

exports.default = _default2;